<template>
  <el-drawer
    v-model="dialogFormVisible"
    :title="title"
    direction="rtl"
    size="50%"
    @close="close"
  >
    <customer :customer="customer" />
    <el-card>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="70px">
        <el-form-item label="标签">
          <el-input
            v-model="form.tag_name"
            maxlength="50"
            :clearable="true"
            size="medium"
            placeholder="请输入标签"
          />
        </el-form-item>
        <el-form-item label="现有标签">
          <el-tag
            v-for="(tag, index) in taglist"
            :key="index"
            @click="clickTag(tag)"
          >
            {{ tag.tag_name }}
          </el-tag>
        </el-form-item>
        <div style="text-align: center" class="button-div">
          <el-button type="primary" @click="save">保存</el-button>
        </div>
      </el-form>
    </el-card>
  </el-drawer>
</template>

<script>
  import { addTag } from '@/api/boyiTag'

  import { parseTime } from '@/utils'
  import Customer from './Customer'
  export default defineComponent({
    name: 'AddTag',
    components: {
      Customer,
    },
    props: {
      taglist: {
        type: Array,
        default: () => {
          return []
        },
      },
    },

    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        formRef: null,
        financeListRef: null,
        form: {
          tag_name: '',
        },
        formLoading: false,
        customer: {
          id: 0,
        },
        rules: {
          tag_name: [
            { required: true, trigger: 'blur', message: '请输入标签名称' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      })
      onMounted(() => {
        // state.financeListRef = ref('financeListRef')
      })

      const showEdit = (row) => {
        if (!row) {
          state.title = '添加'
        } else {
          state.title = '添加标签'
          row.diedline = parseTime(row.diedline, '{y}-{m}-{d}')
          state.customer = Object.assign({}, row)
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        // state['formRef'].resetFields()
        state.form = {}
        state.dialogFormVisible = false
      }
      const clickTag = (tag) => {
        // state['formRef'].resetFields()
        state.form.tag_name = tag.tag_name
      }
      const save = () => {
        console.log('99999999999999999')
        state['formRef'].validate(async (valid) => {
          if (valid) {
            state.formLoading = true
            state.form = {
              ...state.form,
              obj_id: state.customer.id,
              obj_type: 1,
            }
            try {
              const { msg } = await addTag(state.form)
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              emit('fetch-data')
              close()
            } catch (error) {
              // $baseMessage(error, 'error', 'vab-hey-message-success')
            }
            state.formLoading = false
          }
        })
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,

        clickTag,
        parseTime,
      }
    },
  })
</script>
